<template>
  <div class="after-sales app-container">
    <el-card class="box-card" style="margin-bottom: 10px;">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="form-group">
            <el-select v-model="params.status" placeholder="请选择售后状态" clearable size="default">
              <el-option v-for="(value, key) in statusList" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="form-group">
            <el-select v-model="params.type" placeholder="请选择售后类型" clearable size="default">
              <el-option v-for="(value, key) in typeList" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <el-button size="default" type="primary" icon="Search" @click="getAfterSalesOrder">查询</el-button>
          <el-button size="default" @click="handleResetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table v-loading="loading" :data="pageData">
        <el-table-column label="申请时间" prop="created_at"/>
        <el-table-column label="售后单号" prop="code"/>
        <el-table-column label="售后类型">
          <template #default="{row}">
            {{ typeList[row.type] }}
          </template>
        </el-table-column>
        <el-table-column label="售后原因">
          <template #default="{row}">
            <div>原因：{{ reasonList[row.reason] }}</div>
            <div>描述：{{ row.remark }}</div>
          </template>
        </el-table-column>
        <el-table-column label="售后状态">
          <template #default="{row}">
            {{ statusList[row.status] }}
          </template>
        </el-table-column>
        <el-table-column label="售后关联订单">
          <template #default="{row}">
            <div>售后金额：￥{{ row.refund_amount }}</div>
            <div>订单编号：{{ row.order?.code || ""}}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="primary" link size="small" @click="onJumpDetail(row.id, 'detail')">查看详情</el-button>

            <el-button v-if="row.status == 'pending'" type="success" link size="small"
                       @click="onStatusChange(row.id, 'pass')">通过
            </el-button>

            <el-button v-if="row.status == 'pending'" type="error" link size="small"
                       @click="onStatusChange(row.id, 'reject')">拒绝
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      :width="dialogType == 'detail' ? '40vw' : 500"
      :before-close="handleClose">
      <div class="dialog-box">
        <div v-if="dialogType == 'detail' && detail.id">
          <div class="order-lines" v-if="detail.saleorderserviceline_set">
            <div class="title-box">订单明细</div>
            <div class="line-item" v-for="line in detail.saleorderserviceline_set" :key="line.id">
              <img v-if="line.product" class="line-pic" :src="line.product.image_url" :alt="line.product.name">
              <div class="line-item-right">
                <p class="line-name">{{ line.name }}</p>
                <p class="line-qty">x {{ line.quantity }}</p>
                <p class="line-price">￥{{ line.amount }}</p>
              </div>
            </div>
          </div>
          <div class="order-info">
            <div class="title-box">售后单信息</div>
            <div class="info-item">
              <div class="info-key">售后编号：</div>
              <div class="info-val">{{ detail.code }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">申请日期：</div>
              <div class="info-val">{{ detail.created_at }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">售后类型：</div>
              <div class="info-val">{{ typeList[detail.type] }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">售后原因：</div>
              <div class="info-val">{{ reasonList[detail.reason] }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">售后备注：</div>
              <div class="info-val">{{ detail.remark }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">售后状态：</div>
              <div class="info-val">{{ statusList[detail.status] }}</div>
            </div>
            <div class="info-item">
              <div class="info-key">售后金额：</div>
              <div class="info-val price">￥{{ detail.refund_amount }}</div>
            </div>
          </div>

          <div class="log-list">
            <div class="title-box">售后日志</div>
            <el-steps direction="vertical" style="max-width: 600px"
                      :active="detail.saleorderservicetimeline_set.length">
              <el-step v-for="log in detail.saleorderservicetimeline_set" :title="log.title">
                <template #description>
                  <div>{{ log.content }}</div>
                  <div>{{ log.created_at }}</div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
          <!--          <el-button v-if="dialogType == 'express'" type="primary" @click="onOrderExpress">发货</el-button>-->
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue";
import OrderAPI from "@/api/order/order";

const dialogVisible = ref(false);
const dialogTitle = ref('');
const dialogType = ref('');
const detail = ref({});
const statusList = ref({
  'pending': '等待审核处理',
  'pass': '同意',
  'reject': '拒绝',
  'completed': '已完成',
  'canceled': '已取消'
});
const typeList = ref({
  'return': '退货退款',
  'refund': '仅退款',
  'replace': '换货',
  'reissue': '补发商品'
});
const reasonList = ref({
  '1': "商品质量问题",
  '2': "商品与页面描述不符",
  '3': "商品破损/包装问题",
  '4': "少件/未收到货",
  '5': "发错货",
  '6': "价格问题",
  '7': "假冒品牌",
  '8': "其他原因",
});
const loading = ref(false);
const params = ref({
  page: 1,
  size: 10,
  status: "",
  type: ""
});
const total = ref(0);
const pageData = ref([]);

function handleClose() {
  dialogVisible.value = false;
  dialogTitle.value = "";
  dialogType.value = "";
}

//查看售后单详情
function onJumpDetail(id: number) {
  OrderAPI.getSalesServicesSupplierInfo(id).then((res: any) => {
    detail.value = res;
    dialogTitle.value = "售后单详情";
    dialogType.value = "detail";
    dialogVisible.value = true;
  })
}

function onStatusChange(id: number, status: string) {
  if (status == 'pass') {
    ElMessageBox.confirm('是否确定审核通过改售后单？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
      if (value == 'confirm') {

      }
    })
  } else if (status == 'reject') {
    ElMessageBox.prompt('请输入拒绝原因', '拒绝原因', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /\S/,
      inputErrorMessage: '原因不能为空',
    }).then(({value}) => {

    })
  }
}

function handleResetQuery() {
  params.value = {
    page: 1,
    size: 10,
    status: "",
    type: ""
  };
  getAfterSalesOrder();
}

function getAfterSalesOrder() {
  OrderAPI.getSalesServicesSupplier(params.value).then((data: any) => {
    pageData.value = data.records;
    total.value = data.total_page;
    loading.value = false;
  })
}

onMounted(() => {
  getAfterSalesOrder();
})
</script>

<style scoped lang="scss">
.after-sales {


  .dialog-box {
    .title-box {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .order-lines {
      margin-bottom: 10px;

      .line-item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;

        .line-pic {
          width: 80px;
          height: 80px;
          border-radius: 5px;
        }

        .line-item-right {
          margin-left: 10px;

          .line-name {
            font-weight: bold;
          }

          .line-price {
            font-weight: bold;
            color: #ff0000;
          }

          p {
            margin: 0;
          }
        }
      }
    }

    .order-info {
      margin-bottom: 10px;

      .info-item {
        display: flex;
        align-items: center;

        .info-key {
        }

        .info-val {

          &.price {
            font-weight: bold;
            color: #ff0000;
          }
        }
      }
    }

    .form-main {

      .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .form-item-key {
          width: 100px;
        }
      }
    }
  }
}
</style>
